<template>
    <div class="nav">
        <ul>
            <li @click="nav1"><p>热门推荐</p></li>
            <li @click="nav2"><p>电脑</p></li>
            <li @click="nav3"><p>手机</p></li>
            <li @click="nav4"><p>化妆品</p></li>
            <li @click="nav5"><p>家电</p></li>
            <li @click="nav6"><p>生活用品</p></li>
            <li @click="nav7"><p>化妆品</p></li>
            <li @click="nav8"><p>家电</p></li>
            <li @click="nav9"><p>生活用品</p></li>
            <li @click="nav10"><p>化妆品</p></li>
            <li @click="nav11"><p>家电</p></li>
            <li @click="nav12"><p>生活用品</p></li>
        </ul>
    </div>
</template>

<script>
import msg from './msg.js'
export default {
    data: function () {
        return {

        }
    },
    methods: {
        nav1: function () {
            msg.$emit('nav', 1);
        },
        nav2: function () {
            msg.$emit('nav', 2);
        },
        nav3: function () {
            msg.$emit('nav', 3);
        },
        nav4: function () {
            msg.$emit('nav', 4);
        },
        nav5: function () {
            msg.$emit('nav', 5);
        },
        nav6: function () {
            msg.$emit('nav', 6);
        }
    }
}
</script>


<style lang="less" scoped>
.nav {
    width: 200px;
    height: 600px;
    float: left;
    background: #ccc;
    
    ul {
        width: 100%;
        height: 100%;
        text-align: center;
        cursor: pointer;

        li {
            width: 100%;
            height: calc(100% / 12);
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
        }
        li:hover {
            background: orange;
        }
    }
}
</style>

